<template>
  <div>
    <a-card :bordered="false">
      <!--表头条件搜索  -->
      <a-form-model layout="inline" :model="transform">
        <a-form-model-item>
          <a-input placeholder="请输入交易码" style="width: 150px" v-model="transform.transCode"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-select placeholder="请选择交易状态" v-model="transform.transStatus" style="width: 150px"> </a-select>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" icon="sync" @click="resetForm">重置</a-button>
        </a-form-model-item>
      </a-form-model>
      <!-- 主体表格内容 -->
      <div :style="{marginTop:'16px',marginBottom:'16px'}">
        <a-upload
          class="upload-demo"
          :before-upload="checkUpload"
          :show-upload-list="false"
          :customRequest="uploadTransCode"
          :multiple="false"
        >
          <a-button type="primary" icon="upload">导入交易码</a-button> </a-upload
        ><a-button type="primary" icon="download" @click="download">下载模板</a-button>
      </div>
      <a-table :columns="transCodeColumns" :data-source="transCodeData" :pagination="false">
        <a slot="sourceTable" slot-scope="text, record" @click="showTable(record)">{{ text }}</a>
      </a-table>
      <br />
      <!-- 分页组件 -->
      <a-pagination
        v-model="currentpage"
        :show-total="(total, range) => `第${range[0]}-${range[1]}条 , 共计${total} 条记录`"
        :total="total"
        :pageSize="pageSize"
        @change="pageChange"
      />
    </a-card>
  </div>
</template>

<script>
import { downloadModule } from '@api/pf_bank/common/common'
import { uploadTransCode } from '@api/pf_bank/transcode/transcode'

export default {
  data() {
    return {
      currentpage: 1,
      total: 1,
      pageSize: 8,
      transform: {},
      transCodeData: [],
      transCodeColumns: [
        { title: '交易码', dataIndex: 'transCode', key: 'transCode' },
        { title: 'ESB服务ID', dataIndex: 'esbId', key: 'esbId' },
        { title: 'ESB服务名称', dataIndex: 'esbName', key: 'esbName' },
        { title: '交易名称', dataIndex: 'transName', key: 'transName' },
        { title: '交易状态', dataIndex: 'transStatus', key: 'transStatus' },
      ],
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleSubmit() {},

    resetForm() {},

    showTable(record) {
      console.log('record', record)
    },

    pageChange() {},

    //页面下载模板按钮，点击后下载交易码导入模板的excel文件
    download() {
      let filename = '交易码导入模板.xlsx'
      downloadModule(filename).then((res) => {
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel', //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = filename
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    },

    //上传模板前的beforeUpload方法，用于防止用户上传非excel问阿金
    checkUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      let isXlsxOrXls = fileName === 'xlsx' || fileName === 'xls'
      if (!isXlsxOrXls) {
        this.$message.error('只允许上传xlsx或xls类型文件')
      }
      return isXlsxOrXls
    },

    //实际用于上传excel文件的方法
    uploadTransCode(info) {
      let hide = this.$message.loading('导入中...')
      let formData = new FormData()
      formData.append('file', info.file)
      uploadTransCode(formData).then((res) => {
        hide()
        this.$message.success(res.result)
      })
    },
  },
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.ant-pagination {
  float: right;
}
.ant-table-thead > tr > th {
  text-align: center;
}
.upload-demo {
  display: inline-block;
  margin-right: 15px;
}
</style>
